<template>
    <div class='card d-flex flex-column justify-center align-center' :class="!card.active ? 'card_hover' : ''"
        @click="() => card.active ? '' : callfun(toRaw(card))">
        <component :is="icons.getIcon(card.label)"></component>
        <span>{{ card.label }}</span>
        <GreenHook v-show="card.active" class="gou"></GreenHook>
    </div>
</template>

<script lang='ts' setup>
import Google from "@/components/j-svg/google.vue";
import tuite from "@/components/j-svg/tuite.vue";
import GreenHook from "@/components/j-svg/greenhook.vue";
import { toRaw } from "vue";
import { Cardmin, BIndType } from "./script/card";
const icons = {
    [BIndType.GOOGLE]: Google,
    [BIndType.TWITTER]: tuite,
    getIcon: function (key: any): any {
        //@ts-ignore
        return icons[key];
    }
}
defineProps({
    card: {
        type: Cardmin,
        default: {
            active: false,
            label: 'Google'
        }
    },
    callfun: {
        type: Function,
        default: (item: Cardmin) => { }
    }
});
</script>

<style lang='less' scoped>
.card {
    width: 80px;
    height: 80px;
    // background: #15181D;
    border-radius: 4px;
    border: 1px solid var(--border);
    position: relative;

    .gou {
        top: 15%;
        right: 20%;
        position: absolute;
    }

    span {
        margin-top: 4px;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #EAECEF;
        line-height: 20px;
    }
}

.card_hover {
    &:hover {
        background-color: var(--main);
        border: 1px solid var(--main);
        transition: all 1s ease;

        span,
        :deep(#icon) {
            transition: all 1s ease;
            color: black;
            fill: black !important;
        }
    }
}
</style>